<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>简单动态文字弹幕</title>
    <style>
        html,body{margin:0;padding:0;height:100%;overflow:hidden;background:#000;font-family:Arial,Helvetica,sans-serif}
        #screen{position:relative;width:100%;height:100%;overflow:hidden}
        .dm{position:absolute;white-space:nowrap;font-weight:bold;font-size:24px;line-height:1.5;animation:scroll 10s linear forwards}
        @keyframes scroll{from{transform:translateX(100vw)}to{transform:translateX(-100%)}}
        #panel{position:fixed;bottom:0;left:0;right:0;background:rgba(0,0,0,.6);padding:10px;display:flex;gap:10px}
        #textInp{flex:1;padding:8px 12px;border:none;border-radius:4px;font-size:16px}
        button{padding:8px 16px;border:none;border-radius:4px;background:#ff4081;color:#fff;font-size:16px;cursor:pointer}
        button:hover{background:#e73370}
    </style>
</head>
<body>
    <div id="screen"></div>
    <div id="panel">
        <input id="textInp" type="text" placeholder="输入弹幕内容，按回车发送" maxlength="30">
        <button onclick="send()">发送</button>
        <button onclick="clearAll()">清屏</button>
    </div>

    <script>
        const colors=['#ff4081','#03dac6','#ffeb3b','#ff5722','#3f51b5','#00bcd4','#8bc34a','#e91e63'];
        const screen=document.getElementById('screen');
        const inp=document.getElementById('textInp');

        function send(){
            const txt=inp.value.trim();
            if(!txt)return;
            createDm(txt);
            inp.value='';
        }
        function createDm(text){
            const div=document.createElement('div');
            div.className='dm';
            div.textContent=text;
            div.style.color=colors[Math.floor(Math.random()*colors.length)];
            div.style.top=Math.random()*(screen.clientHeight-40)+'px';
            div.style.fontSize=(18+Math.floor(Math.random()*12))+'px';
            screen.appendChild(div);
            div.addEventListener('animationend',()=>div.remove());
        }
        function clearAll(){
            screen.querySelectorAll('.dm').forEach(d=>d.remove());
        }
        inp.addEventListener('keydown',e=>{if(e.key==='Enter')send()});

        // 示例弹幕
        setTimeout(()=>createDm('欢迎来到弹幕世界！'),300);
        setTimeout(()=>createDm('输入文字试试～'),900);
        setTimeout(()=>createDm('清屏按钮可以清空所有弹幕'),1500);
    </script>
</body>
</html>